import { DataTableColumn } from "@/components/common/full-table";
import TooltipIconBtn from "@/components/common/tooltip-icon-btn.vue";
import { NSpace, NSwitch } from "naive-ui";
import ShowOrEdit from "@/components/common/show-or-edit.vue";

export const useTable = (
  handleUpdateStauts: Function,
  handleAssign: Function,
  handleEdit: Function,
  handleRepass: Function,
  handleDelete: Function
) => {
  const columns: DataTableColumn<User>[] = [
    {
      title: "序号",
      key: "no",
      width: 60,
      fixed: "left",
      align: "center",
      render(_, index) {
        return index + 1;
      },
    },
    {
      title: "姓名",
      key: "name",
      width: 180,
      canEdit: true,
      render(row) {
        return (
          <ShowOrEdit
            value={row.name!}
            not-empty
            onUpdateValue={async (value) => {
              const status = await handleEdit({ id: row.id, name: value });
              if (status) row.name = value;
              return status;
            }}
          />
        );
      },
    },
    {
      title: "昵称",
      key: "nickname",
      width: 180,
      canEdit: true,
      render(row) {
        return (
          <ShowOrEdit
            value={row.nickname!}
            not-empty
            onUpdateValue={async (value) => {
              const status = await handleEdit({ id: row.id, nickname: value });
              if (status) row.nickname = value;
              return status;
            }}
          />
        );
      },
    },
    {
      title: "账号",
      key: "account",
      width: 180,
      canEdit: true,
      render(row) {
        return (
          <ShowOrEdit
            value={row.account!}
            not-empty
            validate={(value) => {
              const regexp = /^[a-zA-Z0-9]{6,15}$/;
              if (regexp.test(value)) return true;
              return new Error("只能为英文字符和数字，长度6-15");
            }}
            onUpdateValue={async (value) => {
              const status = await handleEdit({ id: row.id, account: value });
              if (status) row.account = value;
              return status;
            }}
          />
        );
      },
    },
    {
      title: "最近登录",
      key: "lastLogin",
      width: 180,
      ellipsis: { tooltip: true },
    },
    {
      title: "状态",
      key: "status",
      width: 120,
      render(row) {
        return (
          <NSwitch
            value={row.status}
            onUpdateValue={async (status: boolean) => {
              if (await handleUpdateStauts(row, status)) {
                row.status = status;
              }
            }}
          >
            {{
              checked: () => "启用",
              unchecked: () => "停用",
            }}
          </NSwitch>
        );
      },
    },
    {
      title: "联系电话",
      key: "phone",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "联系邮箱",
      key: "email",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "安全手机",
      key: "securPhone",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "安全邮箱",
      key: "securEmail",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "所在地区",
      key: "area",
      width: 180,
      ellipsis: { tooltip: true },
    },
    {
      title: "创建人",
      key: "createUsername",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "创建时间",
      key: "createTime",
      width: 180,
      ellipsis: { tooltip: true },
    },
    {
      title: "操作",
      key: "actions",
      width: 120,
      align: "center",
      fixed: "right",
      lock: true,
      render(row) {
        return (
          <NSpace justify="space-around" align="center">
            <TooltipIconBtn
              icon="mdi:key-variant"
              tip="角色权限"
              onClickEvent={() => handleAssign(row)}
            />
            {/* <TooltipIcon
              icon="mdi:eye"
              tip="查看"
              onClickEvent={() => handlePerms(row)}
            />
            <TooltipIcon
              icon="mdi:text-box-edit"
              tip="编辑"
              onClickEvent={() => handleEdit(row)}
            />
             */}
            <TooltipIconBtn
              icon="mdi:lock-reset"
              tip="重置密码"
              onClickEvent={() => handleRepass(row)}
            />
            <TooltipIconBtn
              icon="mdi:delete-forever"
              tip="删除"
              onClickEvent={() => handleDelete(row)}
            />
          </NSpace>
        );
      },
    },
  ];

  return { columns };
};
